<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			姓名:{{people.name}}
			年龄:{{people.age}}
			身高:{{people.h}}
			体重:{{people.w}}
			<hr>
			<img width="200" src="img/t01.jpg" alt=""/>
			<br/>
			<img width="200" v-bind:src="url" alt="">
			<br/>
			<img :width="width" :src="url" alt="">
			<br/>
			<button v-on:click='width += 10'>+10</button>
			<button @click="width -= 10">-10</button>
			<hr/>
			<button @click="width += width*0.1">放大10%</button>
			<button @click="width -= width*0.1">缩小10%</button>
			<hr/>
			<div v-if="a%2!=0">
				a是奇数
			</div>
			<div v-else>
				a是偶数
			</div>
			<hr/>
			<p>
				张三
				<span v-if="people.age>=18">是</span>
				<span v-else>不是</span>
				{{people.age>=18?"是":"不是"}}
				成年人
			</p>
			条件?结果1:结果2
			<p>
				{{a}}是{{a%==0?"偶数":"奇数"}}
			</p>
			
		</div>
		
		<script>
			const app=Vue.createApp({
				data(){
					return{
						people:{
							name:'张三',
							age:18,
							h:165,
							w:65
						},
						url:"img/t03.jpg",
						width:200,
						a:9,
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>